<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- Metas -->
	    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <meta name="author" content="Vision" />
	    <!-- Links -->
	    <link rel="icon" type="image/png" href="images/favicon.png" />
	    <link href="https://fonts.googleapis.com/css?family=Work+Sans:400,600&display=swap" rel="stylesheet">
	    <link rel="stylesheet" href="icofont.min.css">
	    <link href="css/bootstrap.min.css" rel="stylesheet" />
	    <link href="css/slick.css" rel="stylesheet" />
	    
	    <link href="css/main.css" rel="stylesheet" />
		<title>食品管理</title>
		<link rel="stylesheet" href="layui/css/layui.css"/>
		<style>
			.layui-input-span{
				padding-top: 10px;
				border: 0px;
			}
			
		</style>
	</head>
	<body>
		<header id="home">
    <div class="container">
      <nav class="navbar navbar-expand-lg navbar-light ">
        <!-- Change Logo Img Here -->
        <a class="navbar-brand" href="#"><img src="images/logo.svg" alt=""></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <div class="interactive-menu-button">
            <a href="#">
              <span>Menu</span>
            </a>
          </div>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <!-- Nav Link -->
              <a class="nav-link" data-scroll href="index.html">主页.<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item active">
              <!-- Nav Link -->
              <a class="nav-link" data-scroll href="food.html">食品.</a>
            </li>
            <li class="nav-item">
              <!-- Nav Link -->
              <a class="nav-link" data-scroll href="batch.html">批次.</a>
            </li>
            <li class="nav-item">
              <!-- Nav Link -->
              <a class="nav-link" data-scroll href="user.html">人员管理.</a>
            </li>
            <li class="nav-item">
              <!-- Nav Link -->
              <a class="nav-link" data-scroll href="about.html">关于我们.</a>
            </li>
			<li class="nav-item">
			  <!-- Nav Link -->
			  <a class="nav-link" data-scroll href="log.html">日志.</a>
			</li>
            <!-- <li class="nav-item dropdown">
             
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">EN</a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">DE </a>
                <a class="dropdown-item" href="#">ES </a>
              </div>
            </li> -->
          </ul>
          <a data-scroll href="my.html" class="contact-btn form-inline my-2 my-lg-0">
            <!-- Contacgt Us Button -->
            <button>个人信息</button>
          </a>
        </div>
      </nav>
    </div>
    </header>
		
		
		<script type="text/html" id="toolbarDemo">
		  <div class="layui-btn-container">
		    <button class="layui-btn layui-btn-sm" lay-event="add"  style = "margin-top:10px;margin-left:30px;position:relative;float:left;">添加</button>
		  </div>
		</script>
		<table class="layui-hide" id="food" lay-filter="food"></table>
		<script type="text/html" id="barBatch">
			
		</script>
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="manage">批次管理</a>
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		
		
		<!-- 此为详情页面，默认隐藏 -->
		<div class="layui-fluid" id="detailFood" style="display:none;">
		    <div class="layui-card">
				<div class="layui-card-body" style="padding: 15px;">
					<form class="layui-form" action="" lay-filter="component-form-group">
						<div class="layui-form-item">
						  <label class="layui-form-label">食品名称</label>
						  <div class="layui-input-block">
						    <span type="text" id="name" autocomplete="off" class="layui-input layui-input-span"></span>
						  </div>
						</div>
						<div class="layui-form-item">
						  <label class="layui-form-label">详细信息</label>
						  <div class="layui-input-block">
							<span class="layui-input layui-input-span" id="detail"></span>
						  </div>
						</div>
						
						<div class="layui-form-item">
						  <label class="layui-form-label">食品图片</label>
						  <div class="layui-upload">
						    <img src = "" id="img"/>
						  </div>	
						</div>
						
						 <div class="layui-form-item layui-form-text">
						    <label class="layui-form-label">来源企业</label>
						    <div class="layui-input-block">
						      <span class="layui-input layui-input-span" id="enterpriseinfo"></span>
						    </div>
						  </div>
						  
						<div class="layui-form-item">
						  <label class="layui-form-label">其他信息</label>
						  <div class="layui-input-block">
						    <span type="text" id="otherinfo" autocomplete="off" class="layui-input layui-input-span"></span>
						  </div>
						</div>
						
						<div class="layui-form-item">
						  <label class="layui-form-label">录入者ID</label>
						  <div class="layui-input-block">
						    <span type="text" id="recorder" autocomplete="off" class="layui-input layui-input-span"></span>
						  </div>
						</div>
						
						<div class="layui-form-item">
						  <label class="layui-form-label">录入者姓名</label>
						  <div class="layui-input-block">
						    <span type="text" id="recordername" autocomplete="off" class="layui-input layui-input-span"></span>
						  </div>
						</div>
						
						<div class="layui-form-item">
						  <label class="layui-form-label">录入时间</label>
						  <div class="layui-input-block">
						    <span type="text" id="recordtime"  autocomplete="off" class="layui-input layui-input-span"></span>
						  </div>
						</div>
						
						<div class="layui-form-item">
						  <label class="layui-form-label">联系电话</label>
						  <div class="layui-input-block">
						    <span type="text" id="tel" autocomplete="off" class="layui-input layui-input-span"></span>
						  </div>
						</div>
						
						<div class="layui-form-item">
						  <label class="layui-form-label">录入者职位</label>
						  <div class="layui-input-block">
						    <span type="text" id="position"  autocomplete="off" class="layui-input layui-input-span"></span>
						  </div>
						</div>
					</form>
				</div>
			</div>
		</div>
		
		
		<!-- 此为添加页面，默认隐藏 -->
		<div class="layui-fluid" id="addFood" style="display:none;">
		    <div class="layui-card">
				<div class="layui-card-body" style="padding: 15px;">
					<form class="layui-form" id="addFoodForm" action="" lay-filter="component-form-group" enctype="multipart/form-data">
						<div class="layui-form-item">
						  <label class="layui-form-label">食品名称</label>
						  <div class="layui-input-block">
						    <input type="text" name="name" lay-verify="required|name" autocomplete="off" class="layui-input">
						  </div>
						</div>
						<div class="layui-form-item">
						  <label class="layui-form-label">详细信息</label>
						  <div class="layui-input-block">
							<textarea placeholder="请输入内容" class="layui-textarea" name="detail"></textarea>
						  </div>
						</div>
						
						<div class="layui-form-item">
						  <label class="layui-form-label">食品图片</label>
						  <div class="layui-input-block">
						    <input type="file" name="img" lay-verify="required|img" autocomplete="off" class="layui-upload">
						  </div>
						</div>
						
						 <div class="layui-form-item layui-form-text">
						    <label class="layui-form-label">来源企业</label>
						    <div class="layui-input-block">
						      <textarea placeholder="请输入内容" class="layui-textarea" name="enterpriseinfo"></textarea>
						    </div>
						  </div>
						  
						<div class="layui-form-item">
						  <label class="layui-form-label">其他信息</label>
						  <div class="layui-input-block">
						    <input type="text" name="otherinfo" lay-verify="required|otherinfo" autocomplete="off" class="layui-input">
						  </div>
						</div>
						
						
					</form>
				</div>
			</div>
		</div>
		
		
		<!-- 此为编辑页面，默认隐藏 -->
		<div class="layui-fluid" id="editFood" style="display:none;">
		    <div class="layui-card">
				<div class="layui-card-body" style="padding: 15px;">
					<form class="layui-form" action="" id="editFoodForm" lay-filter="component-form-group" enctype="multipart/form-data">
						
						<div class="layui-form-item" style="display: none;">
						  <label class="layui-form-label">id</label>
						  <div class="layui-input-block">
						    <input type="text" name="id" id="newid" lay-verify="required|newid" autocomplete="off" class="layui-input">
						  </div>
						</div>
						
						<div class="layui-form-item">
						  <label class="layui-form-label">食品名称</label>
						  <div class="layui-input-block">
						    <input type="text" name="name" id="newname" lay-verify="required|name" autocomplete="off" class="layui-input">
						  </div>
						</div>
						<div class="layui-form-item">
						  <label class="layui-form-label">详细信息</label>
						  <div class="layui-input-block">
							<textarea placeholder="请输入内容" id="newdetail" class="layui-textarea" name="detail"></textarea>
						  </div>
						</div>
						
						<div class="layui-form-item">
						  <label class="layui-form-label">食品图片</label>
						  <div class="layui-input-block">
						    <input type="file" name="img" id="newimg" lay-verify="required|img" autocomplete="off" class="layui-input"></input>
						  </div>
						</div>
						
						 <div class="layui-form-item layui-form-text">
						    <label class="layui-form-label">来源企业</label>
						    <div class="layui-input-block">
						      <textarea placeholder="请输入内容" id="newenterpriseinfo" class="layui-textarea" name="enterpriseinfo"></textarea>
						    </div>
						  </div>
						  
						<div class="layui-form-item">
						  <label class="layui-form-label">其他信息</label>
						  <div class="layui-input-block">
						    <input type="text" name="otherinfo" id="newotherinfo" lay-verify="required|otherinfo" autocomplete="off" class="layui-input">
						  </div>
						</div>
						
						
					</form>
				</div>
			</div>
		</div>
					  
	</body>
	<script src="layui/layui.js"></script>
	<script>
		layui.use(['layer','table','form'],function(){
			var layer = layui.layer
			,$ = layui.$
			,table = layui.table
			
			//判断用户登陆情况并获得用户类型
			// $.ajax({
			// 	url: 'http://localhost:8080/foodman//',
			// 	type: 'POST',
			// 	async: false,
			// 	xhrFields: {withCredentials: true},
			// 	crossDomain: true,
			// 	processData: false, 
			// 	contentType: false, 
			// 	
			// 	success: function (info) {
			// 	  if(200 === info.code){
					//成功登录
			// 		
			// 	  } else {
					//错误状态，转向登录界面
					// layer.msg(info.msg)
					// setTimeout(function(){
					// 	window.location.href = "login.html"
					// },800);
			// 		
			// 	  }
			// 	}
			// });
			
			table.render({
			    elem: '#food'
			    ,url:'http://localhost:8080/foodman/food/findByConditions'
				,method:'POST'
				,cellMinWidth:120
				,toolbar: '#toolbarDemo'
			    ,cols: [[
			      {field:'id', title:'食品ID', align:'center', sort: true}
			      ,{field:'name', title:'食品名称',align:'center'}
			      ,{field:'detail', title:'详细信息'}
			      ,{field:'pic', title:'图片',  sort: true, templet: function(res){
			        return '<img src="http://localhost:8080/foodman/image/' + res.pic + '"></em>'
			      }}
			      ,{field:'enterpriseinfo', title:'来源企业信息'}
			      
			      
			      ,{field:'recordtime', title:'录入时间',align:'center'}
				  ,{title:'操作',width:260, align:'center', toolbar: '#barDemo'}
			    ]]
			    ,page: true
			  });//列表渲染结束
			
			
			table.on('tool(food)', function(obj){ 
			    var data = obj.data 
			    ,layEvent = obj.event; 
			    if(layEvent === 'detail'){
					$.ajax({
						url: 'http://localhost:8080/foodman/food/findById?id='+data.id,
						type: 'GET',
						async: false,
						xhrFields: {withCredentials: true},
						crossDomain: true,
						processData: false, 
						success: function (info) {
							//返回的有一个food对象，录入者信息（name,tel,position）
							$("#name").html(info.food.name);
							$("#detail").html(info.food.detail);
							$("#img").attr("src","http://localhost:8080/foodman/image/"+info.food.pic);
							$("#enterpriseinfo").html(info.food.enterpriseinfo);
							$("#otherinfo").html(info.food.otherinfo);
							$("#recorder").html(info.food.recorder);
							$("#recordtime").html(info.food.recordtime);
							$("#recordername").html(info.name);
							$("#tel").html(info.tel);
							$("#position").html(info.position);
						}
					});//请求参数结束
					 
					layer.open({
						//layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
						type:1,
						title: "食品信息详情",
						area:  ['82%', '90%'],
						content: $("#detailFood")//引用的弹出层的页面层的方式加载修改界面表单
					});
				  
			    } else if(layEvent === 'del'){
			      layer.confirm('确认删除么', function(index){
			        obj.del(); //删除对应行（tr）的DOM结构
			        layer.close(index);
			        //向服务端发送删除指令
					
					$.ajax({
						url: 'http://localhost:8080/foodman/food/deleteFood?id='+data.id,
						type: 'GET',
						async: false,
						xhrFields: {withCredentials: true},
						crossDomain: true,
						processData: false, 
						contentType: false, 
						success: function (info) {
						  if(200 === info.code){
							layer.msg(info.msg)
							setTimeout(function(){
								location.reload()
							},800);
						  } else {
							layer.msg(info.msg)
						  }
						}
					});
			      });
				  
			    } else if(layEvent === 'edit'){
					//先将内容清空以免残留
					$("#newname").val("");
					$("#newdetail").val("");
					$("#newimg").html("");
					$("#newenterpriseinfo").val("");
					$("#newotherinfo").val("");
					
					//修改之前先显示
					$.ajax({
						url: 'http://localhost:8080/foodman/food/findById?id='+data.id,
						type: 'GET',
						async: false,
						xhrFields: {withCredentials: true},
						crossDomain: true,
						processData: false, 
						success: function (info) {
							//返回的有一个food对象，录入者信息（name,tel,position）
							$("#newid").val(info.food.id);
							$("#newname").val(info.food.name);
							$("#newdetail").val(info.food.detail);
							$("#newimg").html(info.food.pic);
							$("#newenterpriseinfo").val(info.food.enterpriseinfo);
							$("#newotherinfo").val(info.food.otherinfo);
						}
					});//显示数据结束
					
					layer.open({
					  //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
					  type:1,
					  title: "修改食品信息",
					  area:  ['92%', '90%'],
					  content: $("#editFood"),//引用的弹出层的页面层的方式加载修改界面表单
					  btn: ['修改', '取消'],
					  yes: function (index, layero) {
						  var form=document.querySelector("#editFoodForm");
						  var formdata=new FormData(form);
						  $.ajax({
						  	url: 'http://localhost:8080/foodman/food/updateFood',
						  	type: 'POST',
						  	async: false,
						  	xhrFields: {withCredentials: true},
						  	crossDomain: true,
						  	processData: false, 
						  	contentType: false, 
						  	data: formdata,
						  	success: function (info) {
						  	  if(200 === info.code){
						  		layer.msg(info.msg)
								setTimeout(function(){
									location.reload()
								},800);
						  	  } else {
						  		layer.msg(info.msg)
						  	  }
						  	}
						  });
					  }
			      });
			    }else if(layEvent === 'manage'){
					
				  layer.open({
					type: 2,
					title: '批次管理',
					skin: 'layui-layer-molv',
					content: 'foodbatch.html?foodid='+data.id,
					btn: ['添加', '取消'],
					area:  ['82%', '90%'],
					
				  })
				}
			  });//事件监听结束
			  
			  
			  
			  table.on('toolbar(food)', function(obj){
				if(obj.event === 'add'){
				  layer.open({
					type: 1,
					title: '添加服务',
					skin: 'layui-layer-molv',
					content: $("#addFood"),
					btn: ['添加', '取消'],
					area:  ['82%', '90%'],
					yes: function (index, layero) {
						var form=document.querySelector("#addFoodForm");
						var formdata=new FormData(form);
						
						if (formdata.get("name")!=null && formdata.get("detail")!=null && formdata.get("img")!=null && formdata.get("enterpriseinfo")!=null && formdata.get("otherinfo")!=null){
							formdata.append("batch","暂无批次")
							layer.msg(formdata.get("batch"))
							$.ajax({
								url: 'http://localhost:8080/foodman/food/addFood',
								type: 'POST',
								async: false,
								xhrFields: {withCredentials: true},
								crossDomain: true,
								processData: false, 
								contentType: false, 
								data: formdata,
								success: function (info) {
								  if(200 === info.code){
									layer.msg(info.msg)
								  } else {
									layer.msg(info.msg)
								  }
								}
							});
						}else{
							layer.msg("信息不全，请补充")
						}
						
					}
				  })
				} else{
				  layer.msg('未开放')
				}
			  });//监听添加批次的事件
			  
			  
		})
	</script>
</html>
